<style>
  .screen-content-height{
      height: calc(100vh - 240px);
  }
  .of-y-auto{
    overflow-y: auto;
  }
  .func-card{
    padding: 5px 0px;
  }
</style>
<template>
  <div>
    <Row class="func-card">
      <Col>
      <Button type="primary" :loading="treeSaving" @click="updateClick">
        <span v-if="!treeSaving">保存</span>
        <span v-else>保存中…</span>
      </Button>
      </Col>
    </Row>
    <Row>
      <Col span="16">
        <i-table highlight-row border @on-current-change="tableSelectedRow" :columns="columns" :data="tableData" class="screen-content-height"></i-table>
      </Col>
      <Col span="8" style="border:1px solid #d7dde4" class="screen-content-height of-y-auto">
        <Tree :data="treeShowData" show-checkbox></Tree>
      </Col>
    </Row>

  </div>
</template>
<script>
  export default {
    data () {
      return {
        columns: [
          {
            title: '角色名称',
            key: 'roleName',
            width: 150
          },
          {
            title: '修改人',
            key: 'lastModifiedName',
            width: 150
          },
          {
            title: '修改日期',
            key: 'lastModifiedTime',
            width: 150
          },{
            title: '操作',
            key: 'action',
            align: 'center',
            render (row, column, index) {
              return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
            }
          }
        ],
        tableData:[],
        treeShowData:[],
        treeData:[],
        selectedRowData:{},
        treeSaving: false,
        baseData: [{
          expand: true,
          title: 'parent 1',
          children: [{
            title: 'parent 1-0',
            expand: true,
            disabled: true,
            children: [{
              title: 'leaf',
              disableCheckbox: true
            }, {
              title: 'leaf',
            }]
          }, {
            title: 'parent 1-1',
            expand: true,
            checked: true,
            children: [{
              title: '<span style="color: red">leaf</span>',
            }]
          }]
        }]
      }
    },
    methods: {
      tableSelectedRow : function (currentRow,oldCurrentRow) {
        this.selectedRowData = currentRow;
        this.treeShowData = [];
        this.treeData = [];
        const msg = this.$Message.loading('正在加载中...', 20);
        this.axios.post("/api/role/getAuthorityByRole",{roleId: currentRow.id}).then(res => {
          this.treeData = res.data.returnData;
          setTimeout(msg, 200);
          this.treeShowData = this.buildTree(this.treeData,-1);
        });
      },
      updateClick: function () {
        this.treeSaving = true;
        this.axios.post("/api/role/updateAuthority",{roleId: this.selectedRowData.id,authorities: this.treeData}).then(res => {
          if(res.data.returnCode == 200){
            this.$Message.success(res.data.returnMsg);
            this.treeSaving = false;
          }else{
            this.$Message.error(res.data.returnMsg);
            this.treeSaving = false;
          }

        }).catch(err=> {
            this.$Message.error("操作错误");
        });
      },
      buildTree: function (data, pid) {
        var result = [], temp;
        for (var i = 0; i < data.length; i++) {
          if (data[i].parentId == pid) {
            var expandTree = false;
            if(data[i].parentId == -1){
              expandTree = true;// 根节点展开
            }
            var obj = {"title": data[i].chineseName,"id": data[i].id,"parentId": data[i].parentId,"checked": data[i].checked,"expand":expandTree};
            temp = this.buildTree(data, data[i].id);
            if (temp.length > 0) {
              obj.children = temp;
            }
            result.push(obj);
          }
        }
        console.log(result)
        return result;
      }
    },
    mounted(){
      this.axios.post("/role/gridRoleList",{"pageNum":1,"pageSize":10,"sortList":[],"filterList":[],"firstRequest":true}).then(res => {
        this.tableData = res.data.returnData.pageInfo.list
      });
    }
  }
</script>
